<template>
  <basic-dialog :visible="show"
                :title="`${statusList[4].label}明细`"
                isShowClose
                :min-width="'1000px'"
                @close="$emit('close')"
  >
    <div class="page-content padding-20">
      <q-table
        class="users-table scroll my-sticky-virt scroll-table myTable"
        :columns="tableColumns"
        :data="tableData"
        row-key="id"
        :pagination.sync="pagination"
        color="primary"
        :hide-bottom="tableData.length !== 0"
        style="height: 400px;max-height:400px;margin: 0"
      />
    </div>
  </basic-dialog>
</template>

<script>
import { getDeviceAlarms } from 'src/boot/status-monitor/machine'
import { date } from 'quasar'
import transformTime from './transform-time'
import { mapGetters } from 'vuex'

export default {
  name: 'warning-detail',
  components: {
  },
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    deviceId: {
      default: '',
      required: true
    },
    since: {
      default: '',
      required: true
    },
    before: {
      default: '',
      required: true
    }
  },
  computed: {
    ...mapGetters(['statusList']),
    tableColumns () {
      return [
        { name: 'time', field: 'time', label: '时间', align: 'left' },
        { name: 'alarmNo', field: 'alarmNo', label: `${this.statusList[4].label}编号`, align: 'left' },
        { name: 'alarmType', field: 'alarmType', label: `${this.statusList[4].label}类型`, align: 'left' },
        { name: 'alarmContent', field: 'alarmContent', label: `${this.statusList[4].label}原因`, align: 'left' },
        { name: 'roundTime', field: 'roundTime', label: `${this.statusList[4].label}时长`, align: 'left' }
      ]
    }
  },
  data () {
    return {
      // 表格不分页
      pagination: {
        rowsPerPage: 0
      },
      tableData: []
    }
  },
  methods: {
    // 获取列表数据
    getList () {
      if (this.deviceId && this.since && this.before) {
        getDeviceAlarms(this.deviceId, this.since, this.before).then(res => {
          res.data.forEach(o => {
            o.time = date.formatDate(new Date(o.time), 'YYYY-MM-DD HH:mm:ss')
            o.alarmContent = this.$utils.label(o.alarmContent)
            o.roundTime = transformTime.getDuration(o.duration)
          })
          this.tableData = res.data
        }).finally(
          this.$emit('getDetailedCount')
        )
      } else {
        this.tableData = []
      }
      // console.log('加载数据')
    }
  },
  watch: {
    show: function (newVal) {
      // console.log(newVal)
      if (newVal) {
        this.getList()
      }
    }
  }
}
</script>
